require('../styles/volumebar.less')
import React from 'react';

class VolumeBar extends React.Component{
	constructor(props){
		super(props);
		this.changeVolume=this.changeVolume.bind(this);
	}
	changeVolume(e) {
		let volumeBar=this.refs.volumeBar;
		let volume =(e.clientX- volumeBar.getBoundingClientRect().left)/ volumeBar.clientWidth;
        this.props.onVolumeChange&&this.props.onVolumeChange(volume);
		e.stopPropagation();
		e.preventDefault();
	}
	componentDidMount(){

	}
	render() {
		var volumePercent=this.props.volume*100;
		let currentVolume={
			width:`${volumePercent}%`,
			backgroundColor:this.props.barColor
		};
		return (
			<div className="volume-bar" ref="volumeBar" onClick={this.changeVolume}>
			  <div className="bar" style={currentVolume} ></div>
			</div>
			);
	}

}

VolumeBar.defaultProps = {
	barColor:'#2f9842'
};

export default VolumeBar;